<template>
  <!-- 红色导航栏 -->
  <div class="m-subnav">
    <div class="banxin_big">
      <ul class="subnav">
        <li v-for="item in homeRouter" :key="item.id">
          <a
            href="javascript:;"
            :class="{
              slt: $route.path === `${item.path}`,
            }"
            @click="jump(item)"
          >
            <i v-if="item.isPlaylist" :class="{ 'gd-icon': item.isPlaylist }"></i>
            <em>{{ item.text }}</em>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      homeRouter: [
        { id: 1, text: "推荐", path: "/home" },
        { id: 2, text: "排行榜", path: "/#" },
        { id: 3, text: "歌单", path: "/playlist?cat=全部", isPlaylist: true },
        { id: 4, text: "主播电台", path: "/anchorstation" },
        { id: 5, text: "歌手", path: "/#" },
        { id: 6, text: "新碟上架", path: "/#" },
      ],
    };
  },
  methods: {
    jump(item) {
      localStorage.setItem("curPage", 1);
      this.$router.push(item.path);
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 红色导航栏 */
.m-subnav {
  z-index: 90;
  height: 35px;
  box-sizing: border-box;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
}
.m-subnav .banxin_big {
  position: relative;
  height: 34px;
}
.m-subnav .subnav {
  float: left;
  padding-left: 180px;
}
.m-subnav .subnav li {
  float: left;
  height: 34px;
  text-align: center;
}
.m-subnav .subnav a {
  color: #fff;
}
.m-subnav .subnav a em {
  display: inline-block;
  height: 20px;
  padding: 0 13px;
  margin: 7px 17px 0;
  border-radius: 20px;
  line-height: 21px;
}
.m-subnav .subnav a:hover em,
.m-subnav .subnav .slt em {
  background: #9b0909;
}
.m-subnav .subnav .gd-icon {
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  top: 10px;
  left: 415px;
  background: url("../assets/images/white-r-icon@3x.png") no-repeat;
  background-size: 8px 8px;
}
</style>